<script>
import axios from 'axios';
import { MessagePlugin } from 'tdesign-vue-next';
const baseUrl = import.meta.env.VITE_APP_API_BASE_URL
console.log("####" + baseUrl)


export default {
    data() {
        return {
            title: "用户登录",
            formData: {},
            rules: {
                username: [
                    { required: true, message: '用户名必填', type: 'error' },
                    {
                        min: 3,
                        message: '至少需要两3个字符',
                        type: 'error',
                        trigger: 'blur',
                    },
                    {
                        max: 32,
                        message: '最长不能超过32个字符',
                        type: 'error',
                        trigger: 'blur',
                    },
                ],

                password: [
                    { required: true, message: '密码必填', type: 'error' },
                ]

            }
        }
    },

    methods: {
        onLogin: function (validateResult, firstError) {

            console.log(this.formData)
            if (validateResult.firstError != "") {
                MessagePlugin.warning(validateResult.firstError);
            }


            if (validateResult.validateResult === true) {
                const url = baseUrl + '/user/login'
                console.log(url)
                axios.post(url, this.formData).then(res => {
                    console.log(res.data);
                    let isLogin = res.data.data.isLogin
                    if (isLogin) {
                        MessagePlugin.success(res.data.msg);
                        this.$router.push('/')
                    } else {
                        MessagePlugin.warning(res.data.msg);
                    }


                }).catch(err => {
                    MessagePlugin.error('用户登录失败，错误信息' + err);

                    console.log("err:", err)
                })
            }
        }
    }

}

</script>

<template>
    <div class="flex flex-col w-full bg-white w-max-md justify-center">

        <t-space direction="vertical" size="md" class="p-4">
            <t-form ref="form" :data="formData" reset-type="initial" :rules="rules" @reset="onReset" @submit="onLogin">
                <h1 class="text-xl p-4 font-bold mb-4 text-gray-900">{{ title }}</h1>



                <t-form-item label="用户名(*)" name="username">
                    <t-input v-model="formData.username" >
                        <template #prefix-icon>
                            <t-icon name="user"/>
                        </template>
                    </t-input>
                </t-form-item>

                <t-form-item label="密码(*)" name="password">
                    <t-input type="password" v-model="formData.password">
                        <template #prefix-icon>
                            <t-icon name="lock-on"/>
                        </template>
                    </t-input>
                </t-form-item>
                <div class="flex flex-row justify-center gap-x-8">

                    <t-button type="submit" theme="primary">登录</t-button>
                    <t-button type="button" variant="outline" @click="this.$router.push('/register')">注册</t-button>

                </div>
            </t-form>

        </t-space>
    </div>
</template>